<template>
	<view class="member_head">
		<!-- 吃货卡头部 -->
		<view class="member_head_card">
			<view class="iconfont icon-huangguan-VIP" id="huangguan">
				<span class="member_head_font">超级吃货卡</span>
				<span class="member_head_font1">尊享版</span>
			</view>
			<p class="member_head_p">经典版千万用户的选择</p>
		</view>
		<!-- 吃货卡中间 -->
		<view class="member_body">
			<p style="font-size: 20px;font-weight: bold;margin-top: 16px;margin-left: 110px;">每月至少省<span style="color:orangered;font-size: 20px;font-weight: bold;">20元</span></p>
			<p style="font-size: 18px;font-weight: bold;margin-left:30px;margin-top: 20px;">每月得<span style="color:orangered;font-size:18px;font-weight: bold;">无门槛</span>红包</p>
			<view class="red-packet">
			    <header>
			        <img src="static/logo.png"/>
			    </header>
			    <main>
			        <p class="author">专属外卖红包</p>
			        <button class="open"></button>
			    </main>
			</view>
			<p style="position: relative;font-size: 28px;font-weight: bold;width: 28%;left: 200px;top:-60px;">共20元</p>
		</view>
		<!-- 开通吃货卡 -->
		<view class="member_body_open">
			<p style="font-size: 20px;font-weight: bold;margin-left:30px;margin-top: 20px;">下单返豆 豆兑换商家<span style="color:orangered;font-size:20px;font-weight: bold;">大额红包</span></p>
			<image src="../../static/aa.png" style="height: 90px;margin-left: 20px;margin-top: 10px;"></image>
			<button class="member_buy" @click="open">首月 ￥10 立即开通</button>
		</view>
		<!-- 开通会员卡弹窗 -->
		<uni-popup ref="popup" type="bottom" background-color="#F5F5F5" >
			<view style="text-align: center;">
				<p style="font-size: 18px;font-weight: bold; margin-top: 8px;">尊享版</p>
				<p style="font-size: 14px;font-weight: bold; color: #ACAAAD;margin-top: 6px;">每月20元 （4张5元）红包自动到账</p>
			</view>
			<view style="height: 220px;background-color: #FFFFFF;border-radius: 20px;margin-top: 8px;overflow: hidden;">
				<p style="font-size: 15px;font-weight: bold;margin-left: 16px;margin-top: 18px;">选择套餐</p>
				<view :class="[currentIndex===item.id?'box11':'box1']" @click="dj(item.id,item.price,item.month)" v-for="(item,index) in memberPriceList" :key="item.id">
					<p>{{item.month}}个月</p>
					<p>￥{{item.price}}</p>
				</view>
				<view :class="[currentDivIndex===1?'box11':'box1']" @click="choseDiv">
					<u-number-box v-model="value">
							<view
								slot="minus"
								class="minus"
							>
								<u-icon
									name="minus"
									size="12"
								></u-icon>
							</view>
							<text
								slot="input"
								style="width: 50px;text-align: center;"
								class="input"
							>{{value}}</text>
							<view
								slot="plus"
								class="plus"
							>
								<u-icon
									name="plus"
									color="#000000"
									size="12"
									@click="choseDiv"
								></u-icon>
							</view>
						</u-number-box>
						<p >￥{{this.value*this.memberPrice}}</p>
				</view>
				<p style="font-size: 14px;font-weight: bold;margin-left:16px ;color: #C0BEBF;margin-top: 20px;float: left;">发放时间</p><span style="float:right;font-size: 14px;font-weight: bold;color: #C0BEBF;margin-top: 20px;">立即发放</span>
			</view>
			<button v-show="buyEatMemberVlog" class="member_buyMember" @click="buyEatMember">￥{{this.price}}开通{{this.month}}个月</button>
			<button v-show="buyChoseEatMemberVlog" class="member_buyMember" @click="buyChoseEatMember">￥{{this.value*this.memberPrice}}开通{{this.value}}个月</button>
		</uni-popup>
	</view>
</template>

<script>
import { myRequest } from '../../utils/request'
	export default{
		data(){
			return{
				// token
				token:'',
				// 购买会员卡的弹窗默认false
				memberDloag:false,
				// 选择会员月份默认0
				currentIndex:0,
				// 自定义选择月份默认0
				currentDivIndex:0,
				// 存放会员价格数组
				memberPriceList:[],
				// 存放购买会员的价钱
				price: '',
				// 存放购买会员的月份
				month: '',
				// 存放头部获取的用户账号
				userName:'',
				// 购买会员时用到的数组
				memberForm:{
					memberName:'超级吃货卡',
					userName:'',
					price:'',
					memberId:'',
					month:'',
				},
				// 存放会员id
				memberId:'',
				// 购买会员按钮默认false
				buyEatMemberVlog:false,
				// 自选购买会员按钮默认false
				buyChoseEatMemberVlog:false,
				// 自定义购买会员月份
				value: 0,
				// 自定义购买月份价钱
				memberPrice:'',
			}
		},
		methods:{
			// 打开购买会员弹窗
			open(){
				if(this.token !== ''){
					// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
					this.$refs.popup.open('bottom')
					// 查询会员价格
					this.getMemberPrice()
				}else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			// 选择会员月份时
			dj(id,price,month){
				this.currentIndex = id
				this.price = price
				this.month = month
				this.buyEatMemberVlog = true
				this.buyChoseEatMemberVlog = false
				this.currentDivIndex = 0
			},
			// 选择自定义的会员月份
			choseDiv(){
				this.currentDivIndex = 1
				this.buyEatMemberVlog = false
				this.buyChoseEatMemberVlog = true
				this.currentIndex = 0
			},
			// 购买会员
			buyEatMember(){
				this.$myRequest({
					url: '/eat-service/memberRecord/buyEatMember',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
					},
					method:'POST',
					data:{
						userName: this.userName,
						memberName: this.memberForm.memberName,
						memberId: this.memberForm.memberId,
						month: this.month,
						price: this.price
					},
					dataType:'json',
				}).then(res=>{
					if(res.data.flag){
						uni.showToast({
							title: '成功提示',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						  
					}else{
						console.log('登录失败')
					}
				})
			},
			// 自定义购买会员
			buyChoseEatMember(){
				this.$myRequest({
					url: '/eat-service/memberRecord/buyEatMember',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
					},
					method:'POST',
					data:{
						userName: this.userName,
						memberName: this.memberForm.memberName,
						memberId: this.memberId,
						month: this.value,
						price: this.memberPrice
					},
					dataType:'json',
				}).then(res=>{
					if(res.data.flag){
						uni.showToast({
							title: '成功提示',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						  
					}else{
						console.log('登录失败')
					}
				})
			},
			// 获取会员卡id
			getEatMemberId(){
				this.$myRequest({
					url:'/eat-service/memberType/getEatMemberId',
					data:{
						memberName:'超级吃货卡',
					},
				}).then(res=>{
					this.memberId = res.data.obj.id
				})
			},
			// 查询会员价格
			getMemberPrice(){
				this.$myRequest({
					url:'/eat-service/memberPrice/getMemberPrice',
					data:{
						memberId: this.memberId
					},
				}).then(res=>{
					this.memberPriceList = res.data.obj
					this.memberPriceList.forEach(item=>{
						if(item.month===1){
							this.memberPrice = item.price
						}
					})
				})
			},
		},
		mounted(){
			// 从头部获取用户账号
			this.userName =  uni.getStorageSync('userName')
			// 获取会员卡id
			this.getEatMemberId()
			// 头部获取token
			this.token = uni.getStorageSync('token')
		}
	}
</script>

<style>
	.member_head{
		width:100%;
		height: 120px;
		background-color:#ECC580;
	}
	.member_head_card{
		width: 88%;
		height: 120px;
		background-color: #493242;
		margin: 0px 20px;
		border-radius: 14px 14px 0px 0px;
		overflow: hidden;
	}
	.member_head_font{
		color: #FBD19F;
		font-weight: bold;
		font-family: '宋体';
		margin-top:20px;
		margin-left:4px;
	}
	#huangguan{
		color: #FBD19F;
		font-size: 20px;
		margin-top: 20px;
		margin-left: 10px;
	}
	.member_head_font1{
		color: #FEF8E8;
		font-weight: bold;
		font-size: 14px;
		background-color: #B4722B;
		margin-left:6px;
		line-height: 8px;
	}
	.member_head_p{
		color: #FBD19F;
		font-size: 22px;
		margin-top: 16px;
		margin-left: 12px;
		font-weight: bold;
	}
	.member_body{
		width:100%;
		height:230px;
		background: -webkit-linear-gradient(top,#FEEEE1,#FEFEFE);
		z-index: 1;
		margin-top: -10px;
		border-radius: 16px 16px 0px 0px;
		overflow: hidden;
		
	}
	.red-packet{
		top:12px;
		left:60px;
	    color: #fff;
	    padding: 12px;
	    height: 90px;
	    max-width: 20%;
	    overflow: hidden;
	    position: relative;
	    border-radius: 16px;
	    background: #c40b00;
	}
	.red-packet header{
	    top: -2.5px;
	    left: 0;
	    right: 0;
	    height: 25px;
	    position: absolute;
	    border-radius: 100%;
	    background: #b00b00;
	}
	.red-packet img{
	    left: 0;
	    right: 0;
	    bottom: -28px;
	    margin: auto;
	    max-width: 20%;
	    position: absolute;
	    border-radius: 100%;
	    border: .25px solid #fff;
	}
	.red-packet main{
	    margin-top: 38px;
	    text-align: center;
	}
	.red-packet .author{
	    opacity: .7;
		font-size: 12px;
		font-weight: bold;
	}
	.red-packet .open{
	    outline: 0;
		width: 20%;
		height: 26px;
		color: #fff;
		border: none;
		display: block;
		cursor: pointer;
		margin: 8px auto;
		background: #ffb03a;
		border-radius: 100%;
		transition: background .3s, transform .3s;
	}
	.red-packet .open:hover{
	    transform: scale(1.1);
	}
	.red-packet .open:active{
	    background: #eba534;
	}
	.member_body_open{
		width:100%;
		height: 230px;
	}
	.member_buy{
		width: 85%;
		height: 50px;
		border-radius: 26px;
		background-color: #FF6A3F;
		color: white;
		font-size: 20px;
		font-weight: bold;
		margin-top: 10px;
	}
	.member_month{
		width:22.5%;
		height: 60px;
		border: 3px solid floralwhite;
	}
	.box11 {		background-color: #FEE7B5 ;
		border: 1px solid #FEE7B5;		width:20%;		margin-left: 2%;		height: 60px;		float:left;		text-align: center;		color: #AEADB2 ;		padding: 15rpx 5rpx;		border-radius: 20rpx;
		margin-top: 16px;
	}	.box1 {		background-color: #FFFFFF;
		border: 1px solid #E5E7E6;		width: 21%;		margin-left: 2%;		height: 60px;		float:left;		text-align:center;		color: #AEADB2 ;		padding: 15rpx 5rpx;		border-radius: 20rpx;
		margin-top: 16px;
	}
	.member_buyMember{
		width: 80%;
		height: 50px;
		background-color: #D69A54;
		border-radius: 26px;
		color:white;
		font-size: 18px;
		font-weight: bold;
		margin-top:12px;
	}
</style>